<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>查询</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/search.css">
</head>
<body>
  <div class="search-container">
    <div class="search-wrapper clearfix">
      <div class="searchBar-left float-l">
        <a class="icon">
          <img src="./img/passport.png" alt="">
        </a>
      </div>
      <div class="searchBar-right float-r">
        <input id="passport" type="text" placeholder="请输入要查询的护照号码">
        <a id="searchBtn">
          <img src="./img/search-sm.png" alt="">
        </a>
      </div>
    </div>
  </div>
  <div class="notification-container">
    <p class="notification noti-1">没有查到相关信息</p>
    <p class="notification noti-2">请确保输入正确的护照号码</p>
  </div>
</body>
</html>
<script type="text/javascript" src="./js/index.js"></script>
<script>
var passport = document.getElementById("passport"),
    passportNo,
    searchBtn = document.getElementById("searchBtn")
    notification_container = document.getElementsByClassName("notification-container")[0];

searchBtn.onclick = function(){
  passportNo = passport.value.trim();
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      var res = JSON.parse(xhr.responseText)
      if(res.code == "1"){
        notification_container.style.display = "block"
        setTimeout(function(){
          notification_container.style.display = "none"
        },10000)
      }else if(res.code == "0"){
        window.location = "./comments.html?passportNo="+passportNo
      }else if(res.status != 200){
        alert("查询失败")
      }
    }
  }
  xhr.open("POST", api+"/comment/searchcomment");
  reqData = JSON.stringify({passportNo});

  xhr.send(reqData)
}
</script>